<script setup>
import { template } from "@antfu/utils";
import { ref, reactive, shallowRef } from "vue";
import { Toast } from 'vant'
import RecordLesson from '../views/record/Lesson.vue'
import RecordNews from '../views/record/News.vue'
import RecordShop from '../views/record/Shop.vue'
const active = ref([])
const tablist = reactive([
  {
    title: '健康商城',
    component: RecordShop,
    class: 'cart-circle'
  },
  {
    title: '健康资讯',
    component: RecordNews,
    class: 'add'
  },
  {
    title: '健康课堂',
    component: RecordLesson,
    class: 'play-circle'
  },
])
// const cc = (value) => {
//   console.log(value);
// }

</script>
<template>
  <div class="nav">
    <van-nav-bar title="发现" sticky="true" />
  </div>
  <div class="tabs">
    <van-tabs v-model:active="active" animated swipeable offset-top=100px swipe-threshold>
      <van-tab v-for="(item, index) in tablist" :key="item">
        <template #title>
          <div>
            <van-icon :name="item.class" size="20" class="recordicon" />
            <div>{{ item.title }}</div>
          </div>
        </template>
        <!-- 设置如果有插槽了则用已有的，没有则使用默认插槽 -->
        <!-- <RecordShop v-if="index === 0" >
            具名插槽
            <template #aa>
              <div :style="{color:'red'}" @click="cc(item)">222</div>
            </template>
          </RecordShop>
          <RecordNews v-if="index === 1"></RecordNews>
          <RecordLesson v-if="index === 2"></RecordLesson> -->
        <component :is="item.component" />
      </van-tab>
    </van-tabs>
  </div>
  <router-view></router-view>
  <!-- <van-tab>
    <slot name="title"></slot>
  </van-tab> -->
</template>
<style scoped>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';

.record {
  background-color: rgb(230, 232, 234);
  padding: 10px;
}

.nav {
  height: 46px;
}

.tabs {
  height: calc(100% - 46px);
  overflow-y: auto;
}

.recordicon {
  display: block;
  text-align: center;
}

.van-tabs {
  height: 100%;
}


/* deep  : 使用vue脚手架和UI组件库的时候，在最外层class后面加上 /deep/ 可以对其子组件加上所需样式*/
/deep/ .van-tabs__content {
  height: calc(100% - 44px);
}

/deep/ .van-tab__panel {
  height: 100%;
  overflow-y: auto;
}
</style>